<template>
  <div class="c">
    <button @click="left" class="c1">
      {{ arr[0].title }}
    </button>
    <button @click="right" class="c2">
      {{ arr[1].title }}
    </button>
  </div>

  <div class="k">
    <div class="k3">
      <div v-if="isA" class="k1"><router-view></router-view></div>
    </div>
    <div class="k4">
      <div v-if="isB" class="k2"><router-view></router-view></div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
import { ref } from "vue";
const isA = ref(true);
const isB = ref(false);
function left() {
  router.push("/home");
  isA.value = true;
  isB.value = false;
}
function right() {
  isB.value = true;
  router.push("/about");
  isA.value = false;
}

let arr = ref([
  { title: "管理页面", id: 1, path: "/home" },
  { title: "发布页面", id: 2, path: "/about" },
]);
</script>
<style lang="scss" scoped>
.k {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 600px;
}
.k1 {
  width: 100%;
  height: 200px;
}
.k2 {
  width: 100%;
  height: 200px;
}

.k3 {
  width: 50%;
}

.k4 {
  width: 50%;
  height: 500px;
}
.c {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.c1 {
  width: 50%;
  height: 100px;
}
.c2 {
  width: 50%;
  height: 100px;
}
</style>
